<template>
    <div class="home-page">
        <!-- 顶部导航栏 -->
        <el-header class="header">
            <div class="header-content">
                <div class="logo-section">
                    <!-- <img src="@/assets/logo.svg" alt="Logo" class="logo"> -->
                    <span class="system-title">畜牧育种管理系统</span>
                </div>
                <div class="user-info">
                    <el-dropdown>
                        <span class="el-dropdown-link">
                            <el-icon>
                                <User />
                            </el-icon>
                            {{ counter.user.roleName }} : {{ counter.user.userNickName }}
                            <el-icon class="el-icon--right">
                                <ArrowDown />
                            </el-icon>
                        </span>
                        <template #dropdown>
                            <el-dropdown-menu>
                                <el-dropdown-item @click="GoUser">个人信息</el-dropdown-item>
                                <!-- <el-dropdown-item>修改密码</el-dropdown-item> -->
                                <el-dropdown-item divided @click="handleLogout">退出登录</el-dropdown-item>
                            </el-dropdown-menu>
                        </template>
                    </el-dropdown>
                </div>
            </div>
        </el-header>

        <el-container class="main-container">
            <!-- 侧边栏 -->
            <el-aside width="200px" class="sidebar">
                <el-menu :default-active="activeMenu" class="el-menu-vertical theme-menu" background-color="transparent"
                    text-color="#ffffff" active-text-color="#ffffff" :collapse="isCollapse" router>
                    <el-menu-item index="/OnePages">
                        <el-icon>
                            <House />
                        </el-icon>
                        <span>系统首页</span>
                    </el-menu-item>

                    <el-sub-menu index="1">
                        <template #title>
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>个人设置</span>
                        </template>
                        <el-menu-item index="/User">个人信息</el-menu-item>
                        <!-- <el-menu-item index="/personal-settings/password">修改密码</el-menu-item> -->
                        <el-menu-item index="/NotificationPage">消息通知</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="2">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item index="/Role">角色设置</el-menu-item>
                        <el-menu-item index="/Permission">权限分配</el-menu-item>
                        <el-menu-item index="/UserInfo">人员管理</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="3">
                        <template #title>
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>组织管理</span>
                        </template>
                        <el-menu-item index="/SheepFarm">羊场设置</el-menu-item>
                        <el-menu-item index="/PoultryHouse">栋舍管理</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="4">
                        <template #title>
                            <el-icon>
                                <Calendar />
                            </el-icon>
                            <span>期初管理</span>
                        </template>
                        <el-menu-item index="/table-design">种公期初</el-menu-item>
                        <el-menu-item index="/ram-initial-list">种公期初列表</el-menu-item>
                        <el-menu-item index="/transfer">种母期初</el-menu-item>
                        <el-menu-item index="/ewe-initial-list">种母期初列表</el-menu-item>
                        <!-- <el-menu-item index="/descendant-initial">后裔期初</el-menu-item>
                        <el-menu-item index="/descendant-initial-list">后裔期初</el-menu-item> -->
                    </el-sub-menu>

                    <el-sub-menu index="6">
                        <template #title>
                            <el-icon>
                                <Setting />
                            </el-icon>
                            <span>生产管理</span>
                        </template>
                        <el-menu-item index="/descendant-creation">后裔档案</el-menu-item>
                        <el-menu-item index="/descendant-list">后裔列表</el-menu-item>
                        <el-menu-item index="/ram-form">种公档案</el-menu-item>
                        <el-menu-item index="/ram-list">种公列表</el-menu-item>
                        <el-menu-item index="/livestock-form">种母档案</el-menu-item>
                        <el-menu-item index="/livestock-list">种母列表</el-menu-item>
                        <!-- <el-menu-item index="/production-management/plan">羊只档案</el-menu-item> -->
                        <!-- <el-menu-item index="/production-management/execution">羊只转舍</el-menu-item> -->
                        <el-menu-item index="/EwematingList">种母配种</el-menu-item>
                        <el-menu-item index="/EwePregnancyList">种母妊检</el-menu-item>
                        <el-menu-item index="/EweEwedeliveryList">种母分娩</el-menu-item>
                        <el-menu-item index="/EweWeaningList">种母断奶</el-menu-item>
                        <el-menu-item index="/ewe-history">种母历史记录</el-menu-item>
                        <!-- <el-menu-item index="/production-management/report">后裔转种</el-menu-item> -->
                    </el-sub-menu>

                    <el-sub-menu index="10">
                        <template #title>
                            <el-icon>
                                <User />
                            </el-icon>
                            <span>羊只管理</span>
                        </template>
                        <el-menu-item index="/Death">死亡管理(新增)</el-menu-item>
                        <el-menu-item index="/DeathList">死亡管理(列表)</el-menu-item>
                        <el-menu-item index="/Change">淘汰管理(新增)</el-menu-item>
                        <el-menu-item index="/EliminateList">淘汰管理(列表)</el-menu-item>
                        
                    </el-sub-menu>

                    <el-sub-menu index="11">
                        <template #title>
                            <el-icon>
                                <Coin />
                            </el-icon>
                            <span>采购销售</span>
                        </template>
                        <el-menu-item index="Purchase/">采购管理(新增)</el-menu-item>
                        <el-menu-item index="/ProcurementList">采购管理(列表)</el-menu-item>
                        <el-menu-item index="/Sale">销售管理(新增)</el-menu-item>
                        <el-menu-item index="/SalesList">销售管理(列表)</el-menu-item>
                        <el-menu-item index="/All">供应商管理</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="5">
                        <template #title>
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>耳标管理</span>
                        </template>
                        <el-menu-item index="">耳标分配</el-menu-item>
                        <el-menu-item index="">耳标记录</el-menu-item>
                        <el-menu-item index="">耳标回收</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="7">
                        <template #title>
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>育种管理</span>
                        </template>
                        <el-menu-item index="">选种记录</el-menu-item>
                        <el-menu-item index="">配种管理</el-menu-item>
                        <el-menu-item index="">谱系管理</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="8">
                        <template #title>
                            <el-icon>
                                <Document />
                            </el-icon>
                            <span>提示报表</span>
                        </template>
                        <el-menu-item index="">健康提示</el-menu-item>
                        <el-menu-item index="">育种提示</el-menu-item>
                        <el-menu-item index="">到期提示</el-menu-item>
                    </el-sub-menu>

                    <el-sub-menu index="9">
                        <template #title>
                            <el-icon>
                                <TrendCharts />
                            </el-icon>
                            <span>汇总报表</span>
                        </template>
                        <el-menu-item index="">日报汇总</el-menu-item>
                        <el-menu-item index="">月报汇总</el-menu-item>
                        <el-menu-item index="">年报汇总</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </el-aside>

            <!-- 主内容区域 -->
            <el-main class="main-content">
                <RouterView></RouterView>
            </el-main>

        </el-container>
    </div>

    <!-- 退出登录确认对话框 -->
    <el-dialog v-model="logoutDialogVisible" title="确认退出登录" width="380px" :close-on-click-modal="false"
        :close-on-press-escape="false" class="logout-dialog" center>
        <div class="logout-dialog-content">
            <div class="logout-icon-container">
                <el-icon size="56" color="#F56C6C" class="logout-warning-icon">
                    <Warning />
                </el-icon>
            </div>
            <div class="logout-text-container">
                <h3 class="logout-title">确定要退出登录吗？</h3>
                <p class="logout-subtitle">退出后将返回登录页面</p>
                <p class="logout-subtitle">您需要重新登录才能访问系统</p>
            </div>
        </div>
        <template #footer>
            <div class="logout-dialog-footer">
                <el-button @click="logoutDialogVisible = false" size="large" class="cancel-button">
                    取消
                </el-button>
                <el-button type="danger" @click="confirmLogout" :loading="logoutLoading" size="large"
                    class="confirm-logout-button">
                    <el-icon v-if="!logoutLoading" style="margin-right: 5px;">
                        <SwitchButton />
                    </el-icon>
                    确定退出
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useCounterStore } from '@/stores/counter'
const counter = useCounterStore()
import { useRouter } from 'vue-router'
import {
    House,
    User,
    TrendCharts,
    Document,
    Setting,
    Plus,
    Edit,
    Picture,
    Warning,
    Coin,
    ArrowDown,
    Calendar,
    SwitchButton
} from '@element-plus/icons-vue'

const router = useRouter()
const activeMenu = ref('/home')
const isCollapse = ref(false)
const logoutDialogVisible = ref(false)
const logoutLoading = ref(false)

onMounted(() => {
    router.push("/OnePages")
})

// 页面加载时设置当前激活的菜单
onMounted(() => {
    const currentPath = router.currentRoute.value.path
    activeMenu.value = currentPath
})

// 菜单点击事件
const handleMenuSelect = (index: string) => {
    activeMenu.value = index
    router.push(index)
}

// 处理退出登录点击事件
const handleLogout = () => {
    logoutDialogVisible.value = true
}
const GoUser = () => {
    router.push("/User")
}

// 确认退出登录
const confirmLogout = () => {
    logoutLoading.value = true

    // 清除用户数据
    counter.user.userId = 0
    counter.user.userNo = ""
    counter.user.userName = ""
    counter.user.userNickName = ""
    counter.user.roleId = 0
    counter.user.roleName = ""
    counter.user.token = ""
    counter.user.permission = []

    // 显示成功消息
    ElMessage.success('退出登录成功！')

    // 延迟跳转，让用户看到成功消息
    setTimeout(() => {
        logoutLoading.value = false
        logoutDialogVisible.value = false
        router.push('/')
    })
}
</script>

<style scoped>
.home-page {
    min-height: 100vh;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

/* 顶部导航栏样式 */
.header {
    background: var(--bg-card);
    box-shadow: var(--shadow-light);
    padding: 0;
    height: 70px !important;
    border-bottom: 1px solid var(--border-light);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 20px;
}

.logo-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo {
    width: 32px;
    height: 32px;
}

.system-title {
    font-size: 22px;
    font-weight: bold;
    color: var(--text-primary);
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.user-info {
    display: flex;
    align-items: center;
}

.el-dropdown-link {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.3s ease;
    padding: 8px 12px;
    border-radius: 8px;
}

.el-dropdown-link:hover {
    color: var(--primary-purple);
    background: var(--hover-bg);
    transform: translateY(-1px);
}

/* 主容器样式 */
.main-container {
    height: calc(100vh - 60px);
}

/* 侧边栏样式 */
.sidebar {
    background: var(--bg-sidebar);
    box-shadow: var(--shadow-medium);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(139, 126, 216, 0.1) 0%, rgba(74, 144, 226, 0.1) 100%);
    pointer-events: none;
}

/* 透明滚动条样式 */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
    transition: background 0.3s ease;
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Firefox 滚动条样式 */
.sidebar {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.el-menu-vertical {
    border-right: none;
    height: 100%;
    background: transparent;
    padding: 16px 8px;
}

.el-menu-vertical .el-menu-item {
    margin: 4px 0;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.el-menu-vertical .el-menu-item:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.el-menu-vertical .el-menu-item.is-active {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2);
}

.el-menu-vertical .el-sub-menu__title {
    margin: 4px 0;
    border-radius: 8px;
    transition: all 0.3s ease;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.el-menu-vertical .el-sub-menu__title:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(255, 255, 255, 0.1);
}

.el-menu-vertical .el-sub-menu .el-menu-item {
    margin: 2px 0;
    padding-left: 40px !important;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
}

.el-menu-vertical .el-sub-menu .el-menu-item:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateX(8px);
}

.el-menu-vertical .el-sub-menu .el-menu-item.is-active {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* 主内容区域样式 */
.main-content {
    padding: 24px;
    overflow-y: auto;
    background: var(--bg-primary);
    transition: background-color 0.3s ease;
}

/* 欢迎横幅样式 */
.welcome-banner {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 8px;
    padding: 30px;
    color: white;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.banner-content h1 {
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 600;
}

.banner-content p {
    font-size: 16px;
    opacity: 0.9;
}

.banner-image {
    width: 200px;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
    opacity: 0.8;
}

/* 统计卡片样式 */
.stats-cards {
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    border-radius: 8px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.stat-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
}

.stat-card:nth-child(1) .stat-icon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card:nth-child(2) .stat-icon {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card:nth-child(3) .stat-icon {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card:nth-child(4) .stat-icon {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-content h3 {
    font-size: 14px;
    color: #909399;
    margin: 0 0 8px 0;
    font-weight: normal;
}

.stat-number {
    font-size: 24px;
    font-weight: bold;
    color: #303133;
    margin: 0 0 5px 0;
}

.stat-trend {
    font-size: 12px;
    color: #67c23a;
    margin: 0;
}

/* 快捷操作样式 */
.quick-actions {
    margin-bottom: 30px;
}

.quick-actions h3 {
    margin-bottom: 20px;
    color: #303133;
    font-size: 18px;
}

.action-card {
    text-align: center;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid #e4e7ed;
}

.action-card:hover {
    border-color: #409EFF;
    transform: translateY(-2px);
}

.action-card .el-icon {
    font-size: 32px;
    color: #409EFF;
    margin-bottom: 10px;
    display: block;
}

.action-card span {
    font-size: 14px;
    color: #606266;
}

/* 最近活动样式 */
.recent-activities h3 {
    margin-bottom: 20px;
    color: #303133;
    font-size: 18px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .welcome-banner {
        flex-direction: column;
        text-align: center;
    }

    .banner-image {
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    .sidebar {
        width: 200px !important;
    }

    .stat-card {
        margin-bottom: 15px;
    }

    .action-card {
        margin-bottom: 15px;
    }
}

/* 退出登录对话框样式 */
.logout-dialog {
    border-radius: 12px;
    overflow: hidden;
}

.logout-dialog-content {
    padding: 30px 20px;
    text-align: center;
}

.logout-icon-container {
    margin-bottom: 20px;
    animation: pulse 2s infinite;
}

.logout-warning-icon {
    filter: drop-shadow(0 4px 8px rgba(245, 108, 108, 0.3));
}

.logout-title {
    font-size: 18px;
    font-weight: 600;
    color: #303133;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.logout-subtitle {
    font-size: 14px;
    color: #909399;
    margin: 0;
    line-height: 1.5;
}

.logout-dialog-footer {
    display: flex;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    background-color: #f8f9fa;
    border-top: 1px solid #e4e7ed;
}

.cancel-button {
    min-width: 100px;
    border-radius: 8px;
    font-weight: 500;
    transition: all 0.3s ease;
}

.cancel-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.confirm-logout-button {
    min-width: 120px;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.confirm-logout-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(245, 108, 108, 0.3);
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* 对话框标题样式 */
:deep(.logout-dialog .el-dialog__header) {
    padding: 20px 24px;
    margin: 0;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-bottom: 1px solid #e4e7ed;
}

:deep(.logout-dialog .el-dialog__title) {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
}

:deep(.logout-dialog .el-dialog__body) {
    padding: 0;
}

:deep(.logout-dialog .el-dialog__footer) {
    padding: 0;
}
</style>
